<template>
  <DialogBox
    :visible="boxVisibility"
    @update:visible="boxVisibility = $event"
    resize
    title="物料及成衣周期"
    width="80%"
    :close-on-click-modal="false"
  >
    <Grid
      ref="gridRef"
      :fetch-data="fetchData"
      border
      header-align="center"
      height="500"
      auto-resize
      :pager="pagerConfig"
    >
      <template #toolbar>
        <GridToolbar>
          <template #buttons>
            <div style="display: flex">
              <!-- <Button @click="download">下载</Button> -->
              <div style="margin: 0 10px;display: flex; width: 160px;">
                <Input v-model="spu" placeholder="款号" clearable />
              </div>
              <div style="margin: 0 10px;display: flex; width: 160px;">
                <Input v-model="garment_color_description" placeholder="成衣颜色描述"  clearable />
              </div>
              <Button type="primary" @click="searchEvent">查询</Button>
              <FileUpload
                ref="uploadRef"
                :http-request="httpRequest"
                :file-list="fileList"
                accept=".xlsx"
                :show-file-list="false"
                style="margin-left: 10px;"
              >
                <template #trigger>
                  <tiny-button type="primary">上传</tiny-button>
                </template>
              </FileUpload>
              <div v-if="upload_time" class="uploadTime">上传时间： {{ upload_time }}</div>
            </div>
          </template>
        </GridToolbar>
      </template>
      <GridColumn type="index" width="50"></GridColumn>
      <GridColumn field="sku" title="SKU" min-width="180" show-icon></GridColumn>
      <GridColumn field="store" title="店铺" min-width="100" show-icon></GridColumn>
      <GridColumn field="spu" title="款号" min-width="100" show-icon></GridColumn>
      <GridColumn field="garment_color_description" title="成衣颜色描述" min-width="120" show-icon></GridColumn>
      <GridColumn field="materials_define" title="物料定义" min-width="100" show-icon></GridColumn>
      <GridColumn field="materials_cycle" title="物料周期" min-width="100" show-icon></GridColumn>
      <GridColumn field="abnormal_materials_cycle_remark" title="异常物料周期备注" min-width="100" show-icon></GridColumn>
      <GridColumn field="fabric" title="面料" min-width="180" show-icon show-overflow></GridColumn>
      <GridColumn field="working_procedure" title="工序" min-width="100" show-icon></GridColumn>
      <GridColumn field="special_working_procedure" title="特殊工艺" min-width="100" show-icon></GridColumn>
      <GridColumn field="garment_procedure_cycle_with_cutting" min-width="240">
        <template #header>
          <div>成衣生产周期发裁片</div>
          <div>（适用于2024年6月1日后）</div>
        </template>
      </GridColumn>
      <GridColumn field="spu_rating" title="款式综合评分" min-width="120" show-icon></GridColumn>
      <GridColumn field="remark" title="备注" min-width="100" show-icon></GridColumn>
      <GridColumn field="bulk_procedure_cycle" min-width="300" show-icon>
        <template #header>
          <div>大货生产周期（含面料）试行期</div>
          <div>（适用于2024年6月1日后）</div>
        </template>
      </GridColumn>
      <GridColumn field="adjustment_date" title="调整日期" min-width="100" show-icon></GridColumn>
      <GridColumn field="add_or_update_date" title="增加或者修改日期" min-width="100" show-icon show-overflow></GridColumn>
      <GridColumn field="fabric_inspection_cutting_cycle" title="面料检验、缩水、裁床、发料周期" min-width="200" show-icon></GridColumn>
      <GridColumn field="fabric_standard_cycle" title="面料标准周期" min-width="120" show-icon></GridColumn>
      <GridColumn field="accessory_standard_cycle" title="辅料标准周期" min-width="120" show-icon></GridColumn>
      <GridColumn field="abnormal_materials_cycle_remark" title="异常物料周期备注" min-width="160" show-icon></GridColumn>
      <GridColumn field="spu_number_staticstics" title="款号个数统计" min-width="100" show-icon></GridColumn>
      <GridColumn field="old_spu" title="旧款号" min-width="100" show-icon></GridColumn>
      <GridColumn field="garment_procedure_cycle_with_fabric" min-width="280" show-icon>
        <template #header>
          <div>成衣生产周期发面料</div>
          <div>（在裁片周期上统一+2天）-张兴智</div>
        </template>
      </GridColumn>
      <GridColumn field="product_mode" title="生产模式" min-width="100" show-icon></GridColumn>
      <GridColumn field="lx_spu" title="领星款号" min-width="100" show-icon></GridColumn>
      <GridColumn field="season" title="季节" min-width="100" show-icon></GridColumn>
      <GridColumn field="L2_category" title="二级分类" min-width="100" show-icon></GridColumn>
      <GridColumn field="process_remark" title="工艺备注（带2是有价格差异）" min-width="180" show-icon></GridColumn>
      <GridColumn field="fabric_and_process" title="面料及工艺" min-width="100" show-icon></GridColumn>
      <GridColumn field="fabric_and_process_L2_category" title="面料工艺&二级分类" min-width="100" show-icon></GridColumn>
      <GridColumn field="upload_time" title="上传时间" min-width="100" show-icon show-overflow></GridColumn>
      <GridColumn field="add_or_update_date" title="增加或者修改日期" min-width="100" show-icon show-overflow></GridColumn>
    </Grid>
    <template #footer>
      <Button type="primary" @click="boxVisibility = false"> 关闭 </Button>
    </template>
  </DialogBox>
</template>

<script setup>
import { Button, DialogBox, Grid, GridColumn, GridToolbar, FileUpload, Input, Modal } from '@opentiny/vue'
import { getGarmentCycleOrder , downloadGarmentCycleOrder, uploadGarmentCycleTemplate } from '@/request/api'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const boxVisibility = ref(false)
const pagerConfig = ref({
  attrs: {
    currentPage: 1,
    pageSize: 10,
    pageSizes: [10, 20, 30, 50, 100],
    total: 0,
    align: 'right',
    layout: 'total, prev, pager, next, jumper, sizes'
  }
})
const upload_time = ref('')
const garment_color_description = ref('')
const spu = ref('')
const gridRef = ref()
const searchEvent = () => {
  gridRef.value.pagerConfig.currentPage = 1
  gridRef.value.handleFetch()
}
const getData = ({ page }) => {
  const currentPage = page.currentPage
  const size = page.pageSize
  const params = {
    page: currentPage,
    size,
    garment_color_description: encodeURIComponent(garment_color_description.value),
    spu: encodeURIComponent(spu.value)
  }
  return new Promise((resolve) => {
    getGarmentCycleOrder(params).then(res => {
      if (res?.data?.ret === 0) {
        upload_time.value = res.data.upload_time
        resolve({
          result: res.data.result,
          page: { total: res.data.total }
        })
      }
    })
  })
}
const fetchData = {
  api: getData
}
const download = () => {
  const order_id = router.currentRoute.value.query.id
  downloadGarmentCycleOrder(order_id).then(res => {
    downLoadExcel(res)
  })
}
const fileList = ref([])
const httpRequest = (files) => {
  const formData = new FormData()
  formData.append('file', files.file)
  uploadGarmentCycleTemplate(formData,{'content-type': 'application/x-www-form-urlencoded'}).then(res => {
    if (res?.data?.ret === 0) {
      Modal.message({ message: '成功上传BOM配置文件', status: 'success' })
    } else {
      Modal.message({ message: res.data.msg, status: 'error' })
    }
  }).catch(() => {
    Modal.message({ message: '上传BOM配置文件失败', status: 'error' })
  })
}
defineExpose({
  boxVisibility
})
watch(boxVisibility, (val) => {
  if (val) {
    gridRef.value.handleFetch()
  }
})
</script>
<style lang="scss" scoped>
  .uploadTime {
    position: absolute;
    right: 0;
    line-height: 60px;
    color: red;
    font-size: 16px;
  }
</style>